<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/base.css" />
    <link rel="stylesheet" href="./CSS/common.css" />
    <link rel="stylesheet" href="./CSS/index.css" />
  </head>
  <body>
    <!-- 顶部 -->
    <div class="header">
      <div class="wrapper">
        <ul>
          <li><a href="#">小米网</a></li>
          <li><a href="#">MIUI|</a></li>
          <li><a href="#">米聊|</a></li>
          <li><a href="#">游戏|</a></li>
          <li><a href="#">多看阅读|</a></li>
          <li><a href="#">云服务|</a></li>
          <li><a href="#">小米网移动版|</a></li>
          <li><a href="#">问题反馈|</a></li>
          <li><a href="#">Select Region|</a></li>
        </ul>
      </div>
    </div>
    <!-- 顶部下 -->
    <div class="nav wrapper">
      <ul>
        <li><a href="#" class="img_01"></a></li>
        <li><a href="#" class="img_02"></a></li>
        <li><a href="#">小米手机</a></li>
        <li><a href="#">红米</a></li>
        <li><a href="#">平板</a></li>
        <li><a href="#">电视</a></li>
        <li><a href="#">盒子·影音</a></li>
        <li><a href="#">路由器</a></li>
        <li><a href="#">智能硬件</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">社区</a></li>
      </ul>
    </div>
    <!-- 大图片 -->
    <div class="big_img wrapper">
      <div class="subnav">
        <ul>
          <li>
            <div>
              <a href="#" class="classify">手机</a><a href="#">平板</a
              ><a href="#">电话卡</a>
            </div>

            <span class="iconfont icon-arrow-right-bold"></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">电视</a><a href="#">盒子</a>
              <!-- <a href="#">干果</a> -->
            </div>

            <span class="iconfont icon-arrow-right-bold"></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">路由器</a><a href="#">智能硬件</a>
            </div>

            <span class="iconfont icon-arrow-right-bold"></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">移动电源</a><a href="#">插线板</a>
              <!-- <a href="#">四件套</a><a href="#">被枕</a> -->
            </div>

            <span class="iconfont icon-arrow-right-bold"></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">耳机</a><a href="#">音箱</a>
              <!-- <a href="#">玩具</a><a href="#">辅食</a> -->
            </div>

            <span class="iconfont icon-arrow-right-bold"></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">电池</a><a href="#">存储卡</a>
              <!-- <a href="#">洗护</a><a href="#">美妆</a> -->
            </div>

            <span class="iconfont icon-arrow-right-bold"></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">保护套</a><a href="#">后盖</a>
              <!-- <a href="#">玩具</a> -->
            </div>

            <span class="iconfont icon-arrow-right-bold"></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">贴膜</a><a href="#">其他配件</a>
              <!-- <a href="#">男装</a> -->
            </div>

            <span class="iconfont icon-arrow-right-bold"></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">米兔</a><a href="#">服装</a>
              <!-- <a href="#">图书</a> -->
            </div>

            <span class="iconfont icon-arrow-right-bold"></span>
          </li>

          <li>
            <div>
              <a href="#" class="classify">箱包</a><a href="#">其他周边</a>
            </div>

            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 大图下面的4个小图 -->
    <div class="bigDown wrapper">
      <div>我就是一个任性的白块</div>
      <img src="./images/pro1.png" alt="" />
      <img src="./images/pro2.png" alt="" />
      <img style="margin-right: 0" src="./images/pro3.png" alt="" />
    </div>

    <!-- 图片内容 -->
    <!-- 内容 -->
    <div class="content wrapper">
      <div class="left">
        <a href="#"><img src="./images/girl.jpg" alt="" /></a>
      </div>
      <div class="right">
        <ul>
          <li>
            <a href="#">
              <div class="pic"><img src="./images/d1.jpg" alt="" /></div>

              <div class="info">
                <h4>小米路由器3</h4>

                <p>四天线设计，更安全更稳定</p>

                <p class="price">149元</p>
              </div>
            </a>
          </li>

          <li>
            <a href="#">
              <div class="pic"><img src="./images/d2.jpg" alt="" /></div>

              <div class="info">
                <h4>米家 LED 智能台灯</h4>

                <p>无可视频闪，亮度色温无级调节</p>

                <p class="price">169元</p>
              </div>
            </a>
          </li>

          <li>
            <a href="#">
              <div class="pic"><img src="./images/d3.jpg" alt="" /></div>

              <div class="info">
                <h4>小米净水器 厨下式</h4>

                <p>RO反渗透直出纯净水，包邮包安装</p>

                <p class="price">1999元</p>
              </div>
            </a>
          </li>

          <li>
            <a href="#">
              <div class="pic"><img src="./images/d4.jpg" alt="" /></div>

              <div class="info">
                <h4>小蚁智能摄像机 夜视版</h4>

                <p>能看能听能说，手机远程观看</p>

                <p class="price">149元</p>
              </div>
            </a>
          </li>

          <li>
            <a href="#">
              <div class="pic"><img src="./images/d5.jpg" alt="" /></div>

              <div class="info">
                <h4>Yeelight床头灯</h4>

                <p>触摸式操作，给卧室1600万种颜色</p>

                <p class="price">249元</p>
              </div>
            </a>
          </li>

          <li>
            <a href="#">
              <div class="pic"><img src="./images/d6.jpg" alt="" /></div>

              <div class="info">
                <h4>小米空气净化器2</h4>

                <p>10分钟，房间空气焕然一新</p>

                <p class="price">699元</p>
              </div>
            </a>
          </li>

          <li>
            <a href="#">
              <div class="pic"><img src="./images/d7.jpg" alt="" /></div>

              <div class="info">
                <h4>小米智能安防套装</h4>

                <p>智能警戒，为您的家增添一份安心</p>

                <p class="price">
                  169元
                  <span
                    style="
                      text-decoration: line-through;
                      color: rgba(0, 0, 0, 0.4);
                    "
                    >188元</span
                  >
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="#">
              <div class="pic"><img src="./images/d8.jpg" alt="" /></div>

              <div class="info">
                <h4>米家iHealth血压计</h4>

                <p>爸妈上手就会用的智能血压计</p>

                <p class="price">399元</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部布局 -->
    <!-- 底部 -->
    <div class="footer">
      <div class="wrapper">
        <!-- 帮助中心 -->
        <div class="help">
          <div class="left">
            <dl>
              <dt>帮助中心</dt>

              <dd><a href="#">账户管理</a></dd>

              <dd><a href="#">购物指南</a></dd>

              <dd><a href="#">订单操作</a></dd>
            </dl>

            <dl>
              <dt>服务支持</dt>

              <dd><a href="#">售后政策</a></dd>

              <dd><a href="#">自助服务</a></dd>

              <dd><a href="#">相关下载</a></dd>
            </dl>

            <dl>
              <dt>线下门店</dt>

              <dd><a href="#">小米之家</a></dd>

              <dd><a href="#">服务网点</a></dd>

              <dd><a href="#">零售网点</a></dd>
            </dl>

            <dl>
              <dt>关于小米</dt>

              <dd><a href="#">了解小米</a></dd>

              <dd><a href="#">加入小米</a></dd>
              <dd><a href="#">联系我们</a></dd>
            </dl>

            <dl>
              <dt>关注我们</dt>

              <dd>
                <!-- <a href="#"
                  >在线客服<span class="iconfont icon-customer-service"></span
                ></a> -->
                <a href="#">新浪微博</a>
              </dd>

              <dd><a href="#">小米部落</a></dd>

              <dd><a href="#">官方微博</a></dd>
            </dl>
            <dl>
              <dt>特色服务</dt>

              <dd><a href="#">F码通道</a></dd>

              <dd><a href="#">小米移动</a></dd>
              <dd><a href="#">防伪查询</a></dd>
            </dl>
          </div>
          <!-- 右侧 -->
           <div class="right">
            <h2 class="p1">400-100-5678</h2>
            <p>周一至周日 8:00-18:00</p>
            <p>(仅收市花费)</p>

           </div>
        </div>
      </div>
    </div>
<!-- 底部版权 -->
    <div class="bottom wrapper">
      <img style="width: 60px; height: 60px; margin-right: 10px;" src="./images/logo.png" alt="">
      <div class="right">
        <ul>
          <li>
            <a href="#">小米网 |</a>
          </li>
          <li>
            <a href="#">MIUI |</a>
          </li>
          <li>
            <a href="#">米聊 |</a>
          </li>
          <li>
            <a href="#">多看书城 |</a>
          </li>
          <li>
            <a href="#">小米路由器 |</a>
          </li>
          <li>
            <a href="#">视频电话 |</a>
          </li>
          <li>
            <a href="#">小米后院 |</a>
          </li>
          <li>
            <a href="#">小米天猫店 |</a>
          </li>
          <li>
            <a href="#">小米淘宝直营店 |</a>
          </li>
          <li>
            <a href="#">小米网盟 |</a>
          </li>
          <li>
            <a href="#">问题反馈 |</a>
          </li>
          <li>
            <a href="#">Select Region</a>
          </li>
        </ul>
        <p>
          @mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号
        </p>
        <p>
          违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
        </p>
      </div>
    </div>
    <div class="bottom_title wrapper">
      <h3>探索黑科技，小米为发烧而生</h3>
    </div>
  </body>
</html>
